import { Meta } from '@storybook/blocks';

<Meta title="Design System/Border Radius" />

# Border Radius

The border-radius property defines the radius of the element's corners.

| Variable                |      Value      |   <div style={{ width: '25rem' }}>Example</div>  |
|-----------------------|:-------------:|:----------:|
| --bl-border-radius-xs |  0.125rem (2px) | <div style={{ width: '5rem', height: '5rem', backgroundColor: '#d9e0e8', borderRadius: '0.125rem' }}></div> |
| --bl-border-radius-s |  0.25rem (4px) | <div style={{ width: '5rem', height: '5rem', backgroundColor: '#d9e0e8', borderRadius: '0.25rem' }}></div> |
| --bl-border-radius-m (default) |  0.375rem (6px) | <div style={{ width: '5rem', height: '5rem', backgroundColor: '#d9e0e8', borderRadius: '0.375rem' }}></div> |
| --bl-border-radius-l |  0.5rem (8px) | <div style={{ width: '5rem', height: '5rem', backgroundColor: '#d9e0e8', borderRadius: '0.5rem' }}></div> |
| --bl-border-radius-pill |  62.438rem (999px) | <div style={{ width: '10rem', height: '5rem', backgroundColor: '#d9e0e8', borderRadius: '62.438rem' }}></div> |
| --bl-border-radius-circle |  50% | <div style={{ width: '5rem', height: '5rem', backgroundColor: '#d9e0e8', borderRadius: 50 }}></div> |
